<template>
  <div class="map-wrapper">
    <div class="mapSearch">
      <input
        placeholder="请输入你要查找的关键词"
        v-model="userInput"
        id="tishikuang"
        class="search-input"
      />
<!--      <button type="primary" @click="biu" class="confirm-btn">确定选址</button>-->
    </div>
    <div id="container"></div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
window._AMapSecurityConfig = {
  securityJsCode: '4cd4263ceee7be1397ea1ce8fc371cfb'//在这里填写你的安全密钥
}
export default {
  props: {
    onLocationSelect: {
      type: Function,
      default: null
    }
  },
  data() {
    return {
      map: null,
      autoOptions: {
        input: 'tishikuang' //绑定的搜索关键字的input标签ID，用这个注册
      },
      auto: null,
      userInput: '', //绑定的搜索关键字的的内容
      placeSearch: null,
      searchHere: null, //根据搜索组件搜索到以后的地点信息
      marker: null, //地图标记
      geocoder: null, //地理编码服务
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {

    // poi搜索以后 点击确认选址以后的操作
    biu() {
      if (this.searchHere) {
        this.$message({
          message: '确认地点：'+this.searchHere.name,
          type: 'success'
        });
        // this.$emit('mapHere',this.searchHere);

      }
    },
    initMap() {
      AMapLoader.load({
        key: "0b59c77286dbbf2190ec4ebd744a54ee", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye', 'AMap.MapType',
          'AMap.Geolocation', 'AMap.AutoComplete', 'AMap.PlaceSearch', 'AMap.Geocoder'
        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        this.map = new AMap.Map("container", { //设置地图容器id
          viewMode: "3D", //是否为3D地图模式
          zoom: 17, //初始化地图级别
          center: [105.602725, 37.076636], //初始化地图中心点位置
        });
        //引入高德地图的空间绑定使用
        this.map.addControl(new AMap.Scale())
        this.map.addControl(new AMap.ToolBar())
        this.map.addControl(new AMap.HawkEye())
        this.map.addControl(new AMap.MapType())
        this.map.addControl(new AMap.Geolocation())
        this.auto = new AMap.AutoComplete(this.autoOptions)
        //
        this.placeSearch = new AMap.PlaceSearch({
          map: this.map
        }) //构造地点查询类
        this.auto.on('select', this.select)//绑定查询事件

        // 初始化地理编码服务
        this.geocoder = new AMap.Geocoder()

        // 绑定地图点击事件
        this.map.on('click', this.onMapClick)

      }).catch(e => {
        console.log(e);
      })
    },

    //poi搜索 这里面的这个参数 e 就是搜索以后的地址信息 你可以把它打印出来看一看经纬度什么的都有
    select(e) {
      this.placeSearch.setCity(e.poi.adcode) //依据城市ID搜索
      this.placeSearch.search(e.poi.name) //关键字查询查询
      this.map.setZoom(10,true)
      this.searchHere = e.poi
    },

    // 地图点击事件
    onMapClick(e) {
      const lng = e.lnglat.getLng()
      const lat = e.lnglat.getLat()

      // 清除之前的标记
      if (this.marker) {
        this.map.remove(this.marker)
      }

      // 添加新标记
      this.marker = new AMap.Marker({
        position: [lng, lat],
        map: this.map
      })

      // 逆地理编码，获取地点名称
      this.geocoder.getAddress([lng, lat], (status, result) => {
        if (status === 'complete' && result.info === 'OK') {
          const addressComponent = result.regeocode.addressComponent
          const formattedAddress = result.regeocode.formattedAddress

          // 构建地点信息
          const locationInfo = {
            name: formattedAddress,
            lng: lng,
            lat: lat,
            province: addressComponent.province,
            city: addressComponent.city,
            district: addressComponent.district,
            address: formattedAddress
          }

          this.searchHere = locationInfo

          this.$message({
            message: '已标记位置：' + formattedAddress,
            type: 'success'
          })

          // 触发父组件回调
          if (this.onLocationSelect) {
            this.onLocationSelect(locationInfo)
          }

          // 也可以通过 emit 方式传递
          this.$emit('onChoose', locationInfo)
        }
      })
    }
  },

}
</script>

<style lang="scss" scoped>
.map-wrapper {
  width: 100%;
  height: 100%;
}

#container {
  width: 100%;
  height: 500px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.mapSearch {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  align-items: center;

  .search-input {
    flex: 1;
    padding: 10px 15px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 14px;
    transition: all 0.3s;
    outline: none;

    &:focus {
      border-color: #409eff;
      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
    }

    &::placeholder {
      color: #c0c4cc;
    }
  }

  .confirm-btn {
    padding: 10px 20px;
    background-color: #409eff;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s;

    &:hover {
      background-color: #66b1ff;
    }

    &:active {
      background-color: #3a8ee6;
    }
  }
}
</style>
